<template>
  <!-- 新增房客 / 详情 -->
  <view class="">
    <view class="roomsNew" v-if="!cameraVisible">
      <view class="content" :style="{
          height: orFlag == 3 ? 'calc(100vh - 20px)' : 'calc(100vh - 84px)',
        }">
        <view class="content-item">
          <yy-title title="房客信息"></yy-title>
          <view v-if="orFlag != 3">
            <uni-forms ref="form" :model="form" validateTrigger="blur" :border="true" err-show-type="toast"
              label-width="130px">
              <uni-forms-item label="国籍" name="nationality" required>
                <view class="form-content-item" @click="hadleShowPicker('nationality', 'nationality')">
                  <uni-easyinput type="text" :disabled="true" v-model="form.nationality_text" disabled
                    disableColor="#ffffff" :inputBorder="false" placeholder="请选择" :clearable="true" />
                  <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
                </view>
              </uni-forms-item>
              <uni-forms-item label="证件类型" name="idType" required>
                <view class="form-content-item" @click="hadleShowPicker('certificate_type', 'idType')">
                  <uni-easyinput type="text" v-model="form.idType_text" disabled disableColor="#ffffff"
                    :inputBorder="false" placeholder="请选择" :clearable="true" />
                  <uni-icons type="right" size="21" color="#C2C0C0" v-if="!currentOwner.nation"></uni-icons>
                </view>
              </uni-forms-item>

              <uni-forms-item label="证件号码" name="idCard" required>
                <view class="form-content-item">
                  <uni-easyinput :type="form.idType == 10 ? 'idcard' : 'text'" :maxlength="18" v-model="form.idCard"
                    :inputBorder="false" placeholder="请填写" :clearable="true" @blur="handleIdCardChange" />
                  <u-icon v-if="form.idType == 10" slot="right" size="21" name="scan" color="#2488F5"
                    @click="handleCamera('houseInfo')"></u-icon>
                </view>
              </uni-forms-item>
              <uni-forms-item label="姓名" name="personName" required>
                <view class="form-content-item" :class="form.personName ? '' : 'input-item'">
                  <uni-easyinput type="text" v-model="form.personName" :inputBorder="false" placeholder="请填写"
                    :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="手机号码" name="hotelNumber" required>
                <view class="form-content-item" :class="form.hotelNumber ? '' : 'input-item'">
                  <uni-easyinput type="text" v-model="form.hotelNumber" :inputBorder="false" placeholder="请填写"
                    :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="入住时间" name="checkInTimeName" required>
                <view class="form-content-item" :class="form.checkInTimeName ? '' : 'input-item'"
                  @click="cellTimeClick('checkInTimeName')">
                  <uni-easyinput type="text" v-model="form.checkInTimeName" :inputBorder="false" placeholder="请选择"
                    :clearable="true" disabled />
                </view>
              </uni-forms-item>
              <uni-forms-item label="入住房间" name="roomNumber" required>
                <view class="form-content-item" :class="form.roomNumber ? '' : 'input-item'">
                  <uni-easyinput type="text" v-model="form.roomNumber" :inputBorder="false" placeholder="请填写"
                    :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="人脸照片" name="fFaceUrl"> </uni-forms-item>
              <u-upload :fileList="form.personImage" @afterRead="(info) => afterReadFive(info, 'form', 9)"
                @delete="(info) => deletePhoto(info, 'form')" name="personImage" :maxCount="1" :multiple="true"
                width="96" height="80">
                <image :src="baseImgUrl + 'upload-icon3.png'" style="width: 200rpx; height: 160rpx"></image>
              </u-upload>
            </uni-forms>
          </view>
          <u-form v-else :model="form" ref="form" label-width="100" :error-type="errorType">
            <u-form-item label="国籍" borderBottom label-width="70">
              <u--input v-model.trim="form.nationalityName" border="none" readonly></u--input>
            </u-form-item>
            <u-form-item label="证件类型" borderBottom label-width="70">
              <u--input v-model.trim="form.idTypeName" border="none" readonly></u--input>
            </u-form-item>
            <u-form-item label="证件照片" label-width="70" borderBottom>
              <view style="font-weight: 500;font-size: 28rpx;color: #2488F5;" v-if="form.idCardUrl"
                @click="pvwImage([imgPrefix + form.idCardUrl])">查看</view>
              <view v-else>
                无
              </view>
            </u-form-item>
            <u-form-item label="姓名" borderBottom label-width="70">
              <u--input v-model.trim="form.personName" border="none" readonly></u--input>
            </u-form-item>

            <u-form-item label="手机号码" borderBottom label-width="70">
              <u--input type="number" :maxlength="11" v-model.trim="form.hotelNumber" border="none" readonly></u--input>
            </u-form-item>

            <u-form-item label="证件号码" borderBottom label-width="70">
              <u--input :type="form.idType == 10 ? 'idcard' : 'text'" maxlength="18" v-model.trim="form.idCard"
                border="none" readonly></u--input>
            </u-form-item>

            <u-form-item label="入住时间" borderBottom label-width="70">
              <u--input v-model.trim="form.checkInTime" border="none" readonly></u--input>
            </u-form-item>

            <u-form-item label="入住房间" borderBottom label-width="70">
              <u--input v-model.trim="form.roomNumber" border="none" readonly></u--input>
            </u-form-item>

            <u-form-item label="人脸照片" label-width="70">
              <view v-if="!fileList2[0].url">暂无</view>
            </u-form-item>
            <view class="place-img" v-if="fileList2[0].url">
              <image :src="fileList2[0].url" style="width: 200rpx; height: 160rpx" mode="aspectFill"></image>
            </view>
          </u-form>
        </view>

        <view class="tenant-inforation">
          <yy-title title="同住人员"></yy-title>
          <view class="tenant-list-wrapper">
            <view class="tenant-list-item" v-for="(item, index) in form.hotelCohabitantList" :key="item.uid">
              <!-- 新增的时候可以删除 -->
              <view class="delete-cls" @click="handleDeleteCohabitant(index)" v-if="orFlag == 1">
                删除
              </view>
              <view class="item-inner">
                <view class="label-i">
                  国籍
                </view>
                <view class="value-i">
                  {{item.nationality_text || item.nationalityName}}
                </view>
              </view>
              <view class="item-inner">
                <view class="label-i">
                  证件类型
                </view>
                <view class="value-i">
                  {{item.idType_text || item.idTypeName}}
                </view>
              </view>
              <view class="item-inner">
                <view class="label-i">
                  证件号码
                </view>
                <view class="value-i">
                  {{item.idCard}}
                </view>
              </view>
              <view class="item-inner">
                <view class="label-i">
                  姓名
                </view>
                <view class="value-i">
                  {{item.cohabitantName}}
                </view>
              </view>
              <view class="item-inner">
                <view class="label-i">
                  人脸照片
                </view>
                <view class="value-i look-view" v-if="item.faceImage && item.faceImage.length"
                  @click="pvwImage([getFaceImage(item)])">
                  查看
                </view>
                <view class="value-i" v-else>
                  暂无
                </view>
              </view>
            </view>
          </view>
          <view class="add-persion" @click="handleAddPersion" v-if="orFlag == 1">
            <u-icon name="plus" color="#4A97F9"></u-icon>
            添加同住人员
          </view>
        </view>
      </view>
      <view class="btns" v-if="orFlag != 3">
        <button class="reset-btn lt cancelBtn" type="primary" @click="resethandle">
          取消
        </button>
        <button class="submit-btn" type="primary" @click="submitHandle">
          保存
        </button>
      </view>

      <!-- 时间选择器 -->
      <u-datetime-picker ref="datetimePicker" :show="datetimeShow" v-model="timeValue" mode="datetime"
        :formatter="formatter" :minDate="minDate" :maxDate="maxDate" @close="pickerTimeClose"
        @cancel="pickerTimeClose(1)" @confirm="showTimeConfirm" :closeOnClickOverlay="true"></u-datetime-picker>

      <!-- 添加同行人员 -->
      <u-popup :show="visibleAddPersion" mode="bottom" @close="close" @open="open" v-if="!visibleCamera">
        <view class="tenant-info-wrapper">
          <view class="top-title">
            <view class="p-title">添加同住人员</view>
            <view class="p-cancel" @click="handleCancelTenant">取消</view>
          </view>
          <uni-forms ref="tenantInforationFormRef" :rules="tenantInforationFormRules" :model="tenantInforationForm"
            validateTrigger="blur" :border="true" err-show-type="toast" label-width="248rpx">
            <view class="content-inner-wrapper">
              <uni-forms-item label="国籍" name="nationality" required>
                <view class="form-content-item"
                  @click="hadleShowPicker('nationality', 'nationality', 'tenantInforationForm')">
                  <uni-easyinput type="text" :disabled="true" v-model="tenantInforationForm.nationality_text" disabled
                    disableColor="#ffffff" :inputBorder="false" placeholder="请选择" :clearable="true" />
                  <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
                </view>
              </uni-forms-item>
              <uni-forms-item label="证件类型" name="idType" required>
                <view class="form-content-item"
                  @click="hadleShowPicker('certificate_type', 'idType', 'tenantInforationForm')">
                  <uni-easyinput type="text" v-model="tenantInforationForm.idType_text" disabled disableColor="#ffffff"
                    :inputBorder="false" placeholder="请选择" :clearable="true" />
                  <uni-icons type="right" size="21" color="#C2C0C0" v-if="!currentOwner.nation"></uni-icons>
                </view>
              </uni-forms-item>
              <uni-forms-item label="身份证号" name="idCard" required key="idCard">
                <view class="form-content-item">
                  <uni-easyinput :type="form.idType == 10 ? 'idcard' : 'text'" v-model="tenantInforationForm.idCard"
                    disableColor="#ffffff" :inputBorder="false" placeholder="请填写" :clearable="true" :maxlength="18" />
                  <view v-if="tenantInforationForm.idType == 10">
                    <u-icon slot="right" size="21" name="scan" color="#2488F5"
                      @click="handleCamera('tenantInfo')"></u-icon>
                  </view>
                </view>
              </uni-forms-item>
              <uni-forms-item label="姓名" name="cohabitantName" required key="cohabitantName">
                <view class="form-content-item" :class="tenantInforationForm.cohabitantName ?  '' : 'input-item'">
                  <uni-easyinput type="text" v-model="tenantInforationForm.cohabitantName" disableColor="#ffffff"
                    :inputBorder="false" placeholder="请填写" :clearable="true" style="padding-right: 21px;" />
                </view>
              </uni-forms-item>
              <view key="faceImage">
                <uni-forms-item label="人脸照片" name="faceImage">
                </uni-forms-item>
                <u-upload :fileList="tenantInforationForm.faceImage"
                  @afterRead="(info) => afterReadFive(info, 'tenantInforationForm', 19)"
                  @delete="(info) => deletePhoto(info, 'tenantInforationForm')" name="faceImage" :maxCount="1"
                  :multiple="true" width="96" height="80">
                  <image :src="baseImgUrl + 'upload-icon3.png'" style="width: 200rpx; height: 160rpx"></image>
                </u-upload>
              </view>
              <view class="submit-tenant-info" @click="handleAddTenantInfo">
                提交
              </view>
            </view>
          </uni-forms>
        </view>
      </u-popup>
      <u-picker closeOnClickOverlay v-if="pickerShow" :show="pickerShow" :columns="pickerData" keyName="text"
        @confirm="(data) => handlePickerConfirm(data)" @cancel="pickerShow = false" @close="pickerShow = false"
        :defaultIndex="defaultIndex"></u-picker>
    </view>

    <yy-photo-mask :visible.sync="cameraVisible" :baseImgUrl="baseImgUrl" :clientId="clientId"
      :clientSecret="clientSecret" @generateFilePath="onGenerateFilePath" @parsedSuccess="onParsedSuccess">
    </yy-photo-mask>
  </view>
</template>

<script>
  import {
    tenantOperation
  } from "@/api/home.js";

  import {
    Toast,
    checkIDCard,
    formatters,
    dayTurnTime,
    navBack,
    getBase64Two,
    pvwImage,
    useNetWork,
    isLoading,
    getHeader,
    uploadFile,
    uniTrim,
    parseIDCard,
  } from "@/utils/util.js";
  import mixin from "@/utils/mixin.js";
  import pickerMixin from '@/utils/picker-mixin.js'
  import uploadFileMixin from "../../utils/upload-file-mixin";
  import _ from '@/utils/lodash.js'
  import moment from "../../utils/moment";
  import {
    gethotelStayPersonInfo
  } from "../../api/api";

  export default {
    name: "roomsNew",
    mixins: [mixin, pickerMixin, uploadFileMixin],
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        clientId: this.$clientId,
        clientSecret: this.$clientSecret,
        paiNew: uni.getStorageSync("paiNew"),
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {},
        form: {
          hotelCohabitantList: [],
          nationality: 'CHN',
          nationality_text: '中国',
          idType: '10',
          idType_text: '身份证',
          birthday: '',
          personImage: []
        },
        errorType: ["none"],
        fileList: [],
        fileList2: [],
        orFlag: 1, // 1：添加   2：编辑  3：详情

        dictMapping: {
          has_idcard: [{
            value: "0", // 身份证
            text: "有",
            title: "有"
          }, {
            value: "1", // 人脸
            text: "无",
            title: "无"
          }]
        },
        visibleAddPersion: false,
        cameraVisible: false,
        tenantInforationForm: this.initTenantInforationForm(),
        scanType: '',
        tenantInforationFormRules: {
          selectType: {
            rules: [{
              required: true,
              errorMessage: "请选择是否有身份证号！",
            }]
          },
          nationality: {
            rules: [{
              required: true,
              errorMessage: "请选择国籍！",
            }]
          },
          idType: {
            rules: [{
              required: true,
              errorMessage: "请选择证件类型！",
            }]
          },
          idCard: {
            rules: [{
                required: true,
                errorMessage: "请填写身份证号！",
              },
              {
                validateFunction: (rule, value, data, callback) => {
                  if (!checkIDCard(value) && this.tenantInforationForm.idType == 10) {
                    callback("请输入正确的证件号码!");
                  }
                  return true;
                },
              },
            ]
          },
          cohabitantName: {
            rules: [{
              required: true,
              errorMessage: "请填写姓名！",
            }]
          },
          faceImage: {
            rules: [{
              required: false,
              errorMessage: "请上传人脸照片！",
            }]
          },
        },
        tenantInforationFormRef: null
      }
    },
    onReady() {
      this.$refs.tenantInforationFormRef.setRules(this.tenantInforationFormRules)
    },
    onLoad(options) {
      this.options = JSON.parse(decodeURIComponent(options.data));
      // 详情，则请求详情接口
      this.orFlag = this.options.orFlag;
      uni.setNavigationBarTitle({
        title: "详情",
      });
      if (this.options.orFlag == 3) {
        gethotelStayPersonInfo({
            stayPersonId: this.options.id
          })
          .then((res) => {
            let data = {
              ...res.result.hotelStayPerson,
              hotelCohabitantList: res.result.hotelCohabitantList,
            }

            this.form = data;
            this.form.checkInTime = formatters(
              data.checkInTime,
              "YY-MM-DD HH:mm"
            );
            if (this.form.personImage) {
              this.fileList2.push({
                url: this.imgPrefix + this.form.personImage
              });
            }
          })
      }
    },
    methods: {
      getKey: _.get,
      pvwImage,
      formatter(type, value) {
        if (type === "year") {
          return `${value}年`;
        }
        if (type === "month") {
          return `${value}月`;
        }
        if (type === "day") {
          return `${value}日`;
        }
        return value;
      },
      cellTimeClick(e) {
        this.cellType = e;
        // var minDateNum = +new Date(); //获取当前时间的毫秒数
        // this.maxDate = new Date(2099, 0, 1).getTime();
        var minDateNum = +new Date(); //获取当前时间的毫秒数

        switch (this.cellType) {
          case "checkInTimeName":
            this.minDate = new Date(1971, 0, 1).getTime();
            this.maxDate = minDateNum;
            this.timeValue = this.maxDate;
            break;
          case "departureTime":
            this.minDate = dayTurnTime(this.form.checkInTimeName);
            this.maxDate = new Date(2099, 0, 1).getTime();

            this.timeValue = this.minDate;
            break;
          default:
            break;
        }

        if (this.cellType == "departureTime" && !this.form.checkInTime) {
          Toast("请选择入住时间");
          return false;
        }

        setTimeout(() => {
          this.datetimeShow = true;
        }, 100);
      },
      pickerTimeClose(e) {
        if (e) {
          switch (this.cellType) {
            case "checkInTimeName":
              this.form.checkInTime = "";
              this.form.checkInTimeName = "";
              this.form.departureTime = "";
              this.form.departureTimeName = "";
              break;
            case "departureTime":
              this.form.departureTime = "";
              this.form.departureTimeName = "";
              break;
            default:
              break;
          }
        }
        this.datetimeShow = false;
      },
      /* 时间选择器 确定 */
      showTimeConfirm(e) {
        let arr = e.value;
        if (arr) {
          switch (this.cellType) {
            case "checkInTimeName":
              this.form.checkInTimeName = formatters(arr, "YY-MM-DD HH:mm");
              this.form.checkInTime = dayTurnTime(this.form.checkInTimeName);
              break;
            case "departureTime":
              this.form.departureTimeName = formatters(arr, "YY-MM-DD HH:mm");
              this.form.departureTime = dayTurnTime(this.form.departureTimeName);
              break;
            default:
              break;
          }
        }
        this.datetimeShow = false;
      },
      onGenerateFilePath(file) {
        // 如果是 房客的时候才传图片
        if (this.scanType === 'houseInfo') {
          this.uploadImage(file, 20)
        }
      },
      uploadImage(fileurl, type) {
        useNetWork(); // 判断是否有网络
        isLoading();

        let _this = this;
        uploadFile({
            url: "/web/sys/upload/upload_file",
            filePath: fileurl,
            name: "file",
            formData: {
              type: type,
            },
          })
          .then((res) => {
            isLoading(false);
            let {
              fullPath,
              halfPath
            } = res.result;
            if (type == 20) {
              _this.fileList2.push({
                url: fullPath
              });
              _this.form.idCardUrl = halfPath;
            }
          })
          .finally(() => {
            isLoading(false);
          })
      },
      afterRead(info) {
        useNetWork(); // 判断是否有网络
        isLoading();
        let _this = this;

        uploadFile({
            url: "/web/sys/upload/upload_file",
            filePath: info.file.url,
            name: "file",
            formData: {
              type: 9,
            },
          })
          .then((res) => {
            isLoading(false);
            let {
              fullPath,
              halfPath
            } = res.result;
            _this.fileList.push({
              url: fullPath
            });
            _this.form.personImage = halfPath;
          })
          .finally(() => {
            isLoading(false);
          })
      },
      deletePic(num) {
        if (num == 1) {
          this.fileList = [];
          this.form.personImage = "";
        } else if (num == 2) {
          this.fileList2 = [];
          this.form.idCardUrl = "";
        }
      },
      resethandle() {
        uni.navigateBack();
      },
      submitHandle() {
        let {
          nationality,
          idType,
          personImage,
          personName,
          idCard,
          checkInTimeName,
          roomNumber,
          idCardUrl,
          hotelNumber
        } = this.form;

        if (!nationality) {
          Toast("请选择民族！");
          return;
        }
        if (!idType) {
          Toast("请选择证件类型！");
          return;
        }
        if (!idCard) {
          Toast("请输入证件号码");
          return;
        }
        let idCardFlag = checkIDCard(this.form.idCard);
        if (!idCardFlag && idType == 10) {
          Toast("请输入正确的证件号码");
          return;
        }

        if (!personName) {
          Toast("请输入姓名");
          return;
        }

        if (!hotelNumber) {
          Toast("请输入手机号码");
          return;
        }

        if (hotelNumber && !this.$u.test.mobile(hotelNumber)) {
          Toast("请输入正确的手机号");
          return;
        }

        if (!checkInTimeName) {
          Toast("请选择入住时间");
          return;
        }

        if (!roomNumber) {
          Toast("请输入房间号");
          return;
        }

        if (!personImage) {
          Toast("请上传人脸头像");
          return;
        }

        let data = {
          companyMessageId: this.options.companyMessageId,
          ...this.form,
          personImage: this.form.personImage.map(item => item.halfPath).join('')
        };

        // 处理图片信息
        if (data.hotelCohabitantList) {
          data.hotelCohabitantList = data.hotelCohabitantList.map(item => {
            return {
              ...item,
              faceImage: item.faceImage.map(item => item.halfPath).join()
            }
          })
        }
        isLoading(true)
        tenantOperation(data).then((res) => {
            if (res.code == 200) {
              Toast("新增成功");
              navBack();
            }
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handleCamera(scanType) {
        this.scanType = scanType
        this.cameraVisible = true
      },
      handleAddPersion() {
        this.visibleAddPersion = true
      },
      initTenantInforationForm() {
        return {
          selectType: '0',
          selectType_text: '有',
          stayPersonId: '',
          cohabitantName: '',
          idCard: '',
          faceImage: [],
          nationality: 'CHN',
          nationality_text: '中国',
          idType: '10',
          idType_text: '身份证',
        }
      },
      closeTenantInfoModal() {

      },
      close() {},
      open() {},
      handleCancelTenant() {
        this.visibleAddPersion = false
      },
      onParsedSuccess({
        userName,
        idcard,
        domicileAddress,
        nation
      }) {
        // 房客信息
        if (this.scanType === "houseInfo") {
          this.$set(this.form, "personName", userName);
          this.$set(this.form, "idCard", idcard);
        } else if (this.scanType === "tenantInfo") {
          // 同住人信息
          this.$set(this.tenantInforationForm, "cohabitantName", userName);
          this.$set(this.tenantInforationForm, "idCard", idcard);
        }
      },
      handleAddTenantInfo() {
        // 先判断不能和访客信息一样、
        // 如果有身份证
        if (this.tenantInforationForm.selectType == 0) {
          if (uniTrim(this.tenantInforationForm.idCard) === uniTrim(this.form.idCard)) {
            Toast('同住人不能和房客身份证相同！')
            return
          }
          //
          let idCards = this.form.hotelCohabitantList.map(item => uniTrim(item.idCard))
          if (idCards.includes(uniTrim(this.tenantInforationForm.idCard))) {
            Toast('请勿添加重复的同住人信息！')
            return
          }
        }

        // 再判断同住人不能重复
        this.$refs.tenantInforationFormRef.validate().then(async (res) => {
          this.form.hotelCohabitantList.push({
            ...this.tenantInforationForm,
            uid: _.uniqueId()
          })
          // 提交之后重置一下
          this.tenantInforationForm = this.initTenantInforationForm()
          this.visibleAddPersion = false
        }).catch((err) => {
          // 表单校验验失败，err 为具体错误信息
        })
      },
      handleDeleteCohabitant(index) {
        uni.showModal({
          title: "提示",
          content: "请确认是否删除？",
          confirmColor: "#2488F5",
          success: async (res) => {
            if (res.confirm) {
              // 删除
              this.form.hotelCohabitantList.splice(index, 1)
            }
          },
        });
      },
      handlePickerConfirm(data) {
        if (this.pickerOperateForm == 'form') {
          this.onPickerConfirm(data, 'form')
        } else if (this.pickerOperateForm == 'tenantInforationForm') {
          this.onPickerConfirm(data, 'tenantInforationForm')
        }
      },
      handleIdCardChange() {
        // 根据最新的身份证信息计算出出生日期 和 性别 当证件类型为 身份证的时候
        // if (this.form.idType == 10) {
        //   this.setBirthdayAdnSex(this.form.idCard)
        // }
      },
      setBirthdayAdnSex(idCard, formName = 'form') {
        const {
          birthDate,
          gender
        } = parseIDCard(idCard)
        this[formName].birthday = moment(birthDate).format("YYYY/MM/DD")
        this[formName].sex = gender == '男' ? '1' : '2'
        this[formName].sex_text = gender
      },
      getFaceImage(item) {
        let src = this.getKey(item, 'faceImage[0].halfPath', '')
        if (src) {
          return this.imgPrefix + src
        }
        return this.imgPrefix + this.getKey(item, 'faceImage', '')
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import "../../styles/uni-form.scss";

  .roomsNew {
    flex: 1;
    background-color: #f9f9f9;

    .scan-wrapper {
      padding: 10rpx;
      margin-right: -14rpx;

      .scan-img {
        width: 30rpx;
        height: 27.73rpx;
      }
    }

    .content {
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      width: calc(100% - 35rpx);
      overflow-y: auto;

      .content-item {
        padding: 25rpx;
        background: #fff;
      }

      .tenant-inforation {
        padding: 25rpx;
        background: #fff;
        margin-top: 10rpx;

        .tenant-list-wrapper {
          .tenant-list-item {
            background: #F9F9F9;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            border: 1rpx solid #EBEBEB;
            padding: 30rpx;
            margin-bottom: 10rpx;
            position: relative;

            .delete-cls {
              position: absolute;
              right: 20rpx;
              top: 30rpx;
              font-weight: 400;
              font-size: 26rpx;
              color: #F94A4A;
            }

            .item-inner {
              display: flex;
              margin-bottom: 24rpx;

              .label-i {
                font-weight: 500;
                font-size: 28rpx;
                color: #7F7E83;
                margin-right: 13rpx;
                text-align: justify;
                /* 兼容性备用 */
                text-align-last: justify;
                /* 单行文本两端对齐 */
                width: 120rpx;
                position: relative;

                &::after {
                  content: ':';
                  position: absolute;
                  right: -6rpx;
                }
              }

              .value-i {
                font-weight: bold;
                font-size: 28rpx;
                color: #333333;
              }

              .look-view {
                font-weight: 500;
                font-size: 28rpx;
                color: #2488F5;
              }
            }
          }
        }

        .add-persion {
          background: #F0F8FF;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          border: 1rpx solid #D7EAFB;
          padding: 24rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #4A97F9;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .place-img {
      display: flex;

      image {
        margin-right: 15rpx;
        margin-bottom: 20rpx;
      }
    }

    .upload-view {
      padding-left: 30rpx;
    }

    .u-input__content {
      width: 450rpx;
    }

    .tenant-info-wrapper {
      .top-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 134rpx;
        padding: 0 18rpx;

        .p-title {
          font-weight: bold;
          font-size: 30rpx;
          color: #101010;
        }

        .p-cancel {
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
        }
      }

      .submit-tenant-info {
        margin-bottom: 17rpx;
        width: 680rpx;
        height: 88rpx;
        background: #2488F5;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        border: 1rpx solid #ACCBEC;
        font-weight: 500;
        font-size: 36rpx;
        color: #F9F9F9;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 85rpx;
      }
    }
  }
</style>